<style>
  .product-select.hidden {
      transform: translateY(100%); 
  }
</style>

<div class="{%- if section.settings.layout != 'left_right' -%} product-left_right {%- endif -%}">
  <div class="product_color" data-alt id="product_color">
  <ul class="product_color-img" data-alt>
    <div class="page-width">
      <div class="pro_title">
            {%- if section.settings.title != blank -%}
              {{ section.settings.title }}
            {%- endif -%}
      </div>
    </div>
    {%- for block in section.blocks -%}
      {% case block.type %}
        {%- when 'image' -%}
        <li  style="background-image:url('{{ block.settings.image | img_url: '2200x' }}')" data-alt="{{ block.settings.image.alt | escape }}" class=" {% if forloop.index0 == 0 %} animate__animated wow animate__fadeInBottomLeft animate__slow li-first {% endif %} product-bg {{ block.settings.image_mobile.alt | escape }}" {{ block.shopify_attributes }}>
            <div class="media transparent"  style="padding-bottom: {{ 1 | divided_by: block.settings.image_mobile.aspect_ratio | times: 100 }}%;">
              {%- if block.settings.image_mobile != blank -%}
                <img
                  srcset="{%- if block.settings.image_mobile.width >= 165 -%}{{ block.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
                    {%- if block.settings.image_mobile.width >= 323 -%}{{ block.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
                    {%- if block.settings.image_mobile.width >= 360 -%}{{ block.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
                    {%- if block.settings.image_mobile.width >= 535 -%}{{ block.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
                    {%- if block.settings.image_mobile.width >= 750 -%}{{ block.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
                    {%- if block.settings.image_mobile.width >= 1070 -%}{{ block.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
                    {%- if block.settings.image_mobile.width >= 1500 -%}{{ block.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
                  
                    {%- if block.settings.image_mobile.width >= 2000 -%}{{ block.settings.image_mobile | img_url: '2000x' }} 2000w,{%- endif -%}
                    {%- if block.settings.image_mobile.width >= 2500 -%}{{ block.settings.image_mobile | img_url: '2500x' }} 2500w,{%- endif -%}
                   {%- if block.settings.image_mobile.width >= 3000 -%}{{ block.settings.image_mobile | img_url: '3000x' }} 3000w,{%- endif -%}
                    {{ block.settings.image_mobile | img_url: 'master' }} {{ block.settings.image_mobile.width }}w"
                  data-src="{{ block.settings.image_mobile | img_url: '1500x' }}"
                  sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                  alt="{{ block.settings.image_mobile.alt | escape }}"
                  loading="lazy"
                  class="lazyload"
                  width="{{ block.settings.image_mobile.width }}"
                  height="{{ block.settings.image_mobile.height }}"
                >
              {%- else -%}
                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
              {%- endif -%}
            </div>
          </li>
      {%- endcase -%}
    {%- endfor -%}
  </ul>
  <div class="content-des">
    <div class="page-width">
      <div class="left animate__animated wow animate__fadeInUp">
        <div class="top">
          {%- if section.settings.title != blank -%}
            {{ section.settings.title }}
          {%- endif -%}
        </div>
        {%- if section.settings.text != blank -%}
          <div class="middle">
            {{ section.settings.text }}
          </div>
        {%- endif -%}
        {%- if section.settings.feature_name_1 != blank -%}
          <div class="botton">
            <div class="name_feature">
            {{ section.settings.feature_name_1 }}
            <div>{{ section.settings.feature_1 }}</div>
          </div>
          <div class="name_feature">
            {{ section.settings.feature_name_2 }}
            <div>{{ section.settings.feature_2 }}</div>
          </div>
          </div>           
        {%- endif -%}
        {%- if section.settings.layout != 'top_buttom' -%} 
          <div class="color_img">
            {%- for block in section.blocks -%}
              {% case block.type %}
                {%- when 'color' -%}
                  {%- if block.settings.color != blank -%}
                    <div class="img" {{ block.shopify_attributes }} data-alt="{{ block.settings.color.alt | escape }}">
                      <img loading="lazy" class="cs_img" src="{{ block.settings.color | img_url: '400x' }}" alt="{{ block.settings.color.alt | escape }}" width="30" height="30"/>
                    </div>
                  {%- endif -%}
              {%- endcase -%}
            {%- endfor -%}
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
  {%- if section.settings.layout != 'left_right' -%} 
  <div class="page-width layout-left_right">
    <div class="color_img">
      {%- for block in section.blocks -%}
        {% case block.type %}
          {%- when 'color' -%}
            {%- if block.settings.color != blank -%}
              <div class="img" {{ block.shopify_attributes }} data-alt="{{ block.settings.color.alt | escape }}">
                <img loading="lazy" class="cs_img" src="{{ block.settings.color | img_url: '400x' }}" alt="{{ block.settings.color.alt | escape }}" width="30" height="30"/>
              </div>
            {%- endif -%}
        {%- endcase -%}
      {%- endfor -%}
    </div>
    {%- if section.settings.text != blank -%}
          <div class="middle">
            {{ section.settings.text }}
          </div>
    {%- endif -%}
  </div>
{%- endif -%}
  </div>
</div>


<script>

$(window).ready(function() {
  $('.product_color-img [data-alt]').hide();
  var $productColor = $('.color_img .img');
  $([$productColor]).each(function(e) {
    var $selectV = $(this).eq(0).addClass("active");
    var $img_attribute = $selectV.children('img').attr('alt');
    var $ProductUl = document.querySelector('.product_color-img');
    var $ProductColor = document.querySelector('.product_color');
    $('li[data-alt="' + $img_attribute + '"]').show();
    $ProductUl.setAttribute('data-alt', $img_attribute);
    $ProductColor.setAttribute('data-alt', $img_attribute);
    $(this).on('click', function(e) {
    $(this).addClass('active','animate').siblings('.img').removeClass('active','animate');
    var $colorImg = $(this).children().attr('alt');
    $ProductUl.setAttribute('data-alt', $colorImg);
    $ProductColor.setAttribute('data-alt', $colorImg);
    $('li[data-alt="' + $colorImg + '"]').show().siblings('li').hide();
    }); 
  });
})  
</script>  


{% if section.settings.layout == 'left_right' %}
  <script>
    $(window).ready(function() {
    var tooSmall = false;
    var controller = null;
    var maxWidth = 991;
  
    if( $(window).width() < maxWidth ) {
      tooSmall = true;
    }


    function initScrollMagic() {

      const productSelect = document.querySelector(".product-select");
      const productBg = productSelect.querySelector(".product-bg");
      const contentDes = productSelect.querySelector(".content-des");

      const PsController = new ScrollMagic.Controller();

     let scene21 = new ScrollMagic.Scene({
      triggerElement: productSelect,
      triggerHook: 0,
    })
    .setPin(productSelect) 
    .addTo(PsController);   

     const productBgAnim = TweenMax.fromTo(productBg, 1, { left: '-45%', top: '30%' }, { left: '-20%', top: '0%' });
     const contentDesAnim = TweenMax.fromTo(contentDes, 1, { opacity: .5, top: '60%' }, { opacity: 1, top: '50%' });
     

    let scene22 = new ScrollMagic.Scene({
   
      triggerElement: productSelect,
      triggerHook: 1,
    })
    .setTween(productBgAnim)
    .addTo(PsController);   


    let scene23 = new ScrollMagic.Scene({
      duration: 200,
      triggerElement: productSelect,
      triggerHook: 1,
    })
    .setTween(contentDesAnim)
    .addTo(PsController);   

}
    
      if( !tooSmall ) {
        initScrollMagic();
      }

    $(window).resize( function() {
      var wWidth = $(window).width();
      if( wWidth < maxWidth ) {
        if( PsController !== null && PsController !== undefined ) {
          PsController = PsController.destroy( true );
        }
      } else if( wWidth >= maxWidth ) {
        if( PsController === null || PsController === undefined ) {
          initScrollMagic();
        }
      }
    });
  })
  </script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var productSelect = document.querySelector(".product-select");

    window.addEventListener("scroll", function() {
      var bottomOffset = document.documentElement.scrollHeight - window.innerHeight - window.scrollY;

      if (bottomOffset <= productSelect.clientHeight) {
        productSelect.classList.add("hidden");
      } else {
        productSelect.classList.remove("hidden");
      }
    });
  });
</script>
  
{% else %}
    
{% endif %}




{% schema %}
  {
    "name": "Product select",
    "tag": "section",
    "class": "product-select",
    "settings": [
      {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "left_right",
          "label": "Left right"
        },
        {
          "value": "top_buttom",
          "label": "TOP buttom"
        }
      ],
      "default": "left_right",
      "label": "layout"
     },
      {
        "type": "html",
        "id": "title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text"
      },
      {
        "type": "text",
        "id": "feature_name_1",
        "label": "Feature name"
      },
      {
        "type": "text",
        "id": "feature_1",
        "label": "Feature 1"
      },
      {
        "type": "text",
        "id": "feature_1_us",
        "label": "Feature 1 US"
      },
      {
        "type": "text",
        "id": "feature_name_2",
        "label": "Feature name"
      }, {
        "type": "text",
        "id": "feature_2",
        "label": "Feature 2"
      },
      {
        "type": "text",
        "id": "feature_2_us",
        "label": "Feature 2 US"
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "image",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "image_picker",
            "id": "image_mobile",
            "label": "Image mobile"
          }
        ]
      }, {
        "type": "color",
        "name": "color",
        "settings": [
          {
            "type": "image_picker",
            "id": "color",
            "label": "Color"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Product select"
      }
    ]
  }
{% endschema %}